<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>myApp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- WARNING : screen.css is included with <h:outputStylesheet> at the bottom of the file after </h:body> so
         that it overrides correctly PF css.
         using PF facets for ordering inclusions does not work with <h:outputStylesheet>, only with direct css inclusion
         but if we do direct inclusion we lose JSF resource loading feature -->
</h:head>
<h:body>

    <!-- warning, as per documentation of Primefaces you cannot wrap a single form outside of a p:layout,
         each layout unit must have his form. also size must be defined for all non-center layout units -->
    <pe:layout stateCookie="true" widgetVar="pageLayoutWidget">

        <pe:layoutPane styleClassContent="page_layout_north" position="north" size="58" resizable="false" closable="true">
            <p:toolbar styleClass="page_toolbar">
                <p:toolbarGroup align="left">
                </p:toolbarGroup>
            </p:toolbar>
        </pe:layoutPane>

        <pe:layoutPane position="south" size="50" resizable="false" closable="true" >
            <h:outputText value="FOOTER"/>
        </pe:layoutPane>

        <pe:layoutPane position="west" size="200" resizable="false" closable="true">
            <f:facet name="header">
                <h:outputText id="logged_user_full_name" styleClass="ui-widget" value="User: #{loggedUserFullName}"/>
                <p:graphicImage url="#{resource['images/view_fullscreen.ico']}" style="float:right;"
                                title="Full Screen"
                                onclick="pageLayoutWidget.close('west');pageLayoutWidget.close('north');pageLayoutWidget.close('south');"/>
            </f:facet>
            <ui:include src="/pages/menu.xhtml"/>
        </pe:layoutPane>

        <pe:layoutPane styleClassContent="page_layout_center" position="center">
            <ui:insert name="content">
                [Template content will be inserted here]
            </ui:insert>
        </pe:layoutPane>

    </pe:layout>


</h:body>

<!-- CSS inclusion, see note above -->
<h:outputStylesheet name="css/screen.css"/>

</HTML>
